doctype html
html
  head
    <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

    meta(charset='UTF-8')

    != '<style>'
    :stylus
      @import "bootstrap"

      body
        margin-top 90px

      .header
        position fixed
        top: 0
        left 50%
        margin-left -480px
        background-color #fff
        border-bottom 1px solid #ddd
        padding-top 10px
        z-index 10

      .footer
        color #ddd
        font-size 12px
        text-align center
        margin-top 20px
        a
          color #ccc
          text-decoration underline

      .the-icons
        font-size 14px
        line-height 24px

      .switch
        position absolute
        right 0
        bottom 10px
        color #666
        input
          margin-right .3em

      .codesOn
        .i-name
          display none
        .i-code
          display inline
      .i-code
        display none

    - var rnd = Math.floor(Math.random()*100000000);
    | @font-face {
    |   font-family: '#{font.fontname}';
    |   src: url('./font/#{font.fontname}.eot?#{rnd}');
    |   src: url('./font/#{font.fontname}.eot?#{rnd}#iefix') format('embedded-opentype'),
    |        url('./font/#{font.fontname}.woff?#{rnd}') format('woff'),
    |        url('./font/#{font.fontname}.ttf?#{rnd}') format('truetype'),
    |        url('./font/#{font.fontname}.svg?#{rnd}##{font.fontname}') format('svg');
    |   font-weight: normal;
    |   font-style: normal;
    | }
    | 
    | 
    | .demo-icon
    | {
    |   font-family: "#{font.fontname}";
    |   font-style: normal;
    |   font-weight: normal;
    |   speak: never;
    | 
    |   display: inline-block;
    |   text-decoration: inherit;
    |   width: 1em;
    |   margin-right: .2em;
    |   text-align: center;
    |   /* opacity: .8; */
    | 
    |   /* For safety - reset parent styles, that can break glyph codes*/
    |   font-variant: normal;
    |   text-transform: none;
    | 
    |   /* fix buttons height, for twitter bootstrap */
    |   line-height: 1em;
    | 
    |   /* Animation center compensation - margins should be symmetric */
    |   /* remove if not needed */
    |   margin-left: .2em;
    | 
    |   /* You can be more comfortable with increased icons size */
    |   /* font-size: 120%; */
    | 
    |   /* Font smoothing. That was taken from TWBS */
    |   -webkit-font-smoothing: antialiased;
    |   -moz-osx-font-smoothing: grayscale;
    | 
    |   /* Uncomment for 3D effect */
    |   /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
    | }
    | 

    != '</style>'

    //- link(rel='stylesheet', href='css/' + font.fontname + '.css')
    link(rel='stylesheet', href='css/animation.css')
    <!--[if IE 7]><link rel="stylesheet" href="css/" + font.fontname + "-ie7.css"><![endif]-->

    script.
      function toggleCodes(on) {
        var obj = document.getElementById('icons');

        if (on) {
          obj.className += ' codesOn';
        } else {
          obj.className = obj.className.replace(' codesOn', '');
        }
      }

  body
    .container.header
      h1 #{font.fullname}
        |  
        small font demo
      label.switch
        input(type='checkbox', onclick='toggleCodes(this.checked)')
        | show codes

    #icons.container
      - var col_class = "span" + Math.ceil(12 / meta.columns)
      - var rows_total = Math.ceil(glyphs.length / meta.columns)
      - function pad(s) { return s.length === 3 ? '0' + s : s; }
      - for (var row = 0; row < rows_total; row++)

        .row
          - for (var col = 0; col < meta.columns && glyphs[row*meta.columns + col]; col++)

            - var g = glyphs[row*meta.columns + col]

            - var css_class = css_name = meta.css_use_suffix ? (g.css || g.file) + meta.css_prefix_text : meta.css_prefix_text + (g.css || g.file)

            - if (g['css-ext']) css_class += ' ' + g['css-ext']

            - var code = pad(g.code.toString(16))
              .the-icons(class=col_class, title='Code: 0x' + code)
                i(
                  class='demo-icon'
                  class=css_class
                ) !{'&#x' + code + ';'}
                |  
                span.i-name #{css_name}
                span.i-code 0x#{code}

    .container.footer
      | Generated by 
      a(href='http://fontello.com') fontello.com
